<template>
	<div class="todo-footer" v-show="this.todos.length">
		<label>
			<input type="checkbox" v-model="allCheck" />
		</label>
		<span> <span>{{ doneCount }}</span> / {{ todos.length }} </span>
		<button class="btn btn-danger" @click="clearDone">清除已完成任务</button>
	</div>
</template>

<script>
import axios from 'axios'
export default {
	name: "MyFooter",
	props: ["todos"],
	computed: {
		doneCount() {
			return this.todos.reduce((pre, item) => pre + (item.done ? 1 : 0), 0)
		},
		allCheck: {
			get() {
				return this.doneCount == this.todos.length && this.todos.length > 0
			},

			set(value) {
				// this.allCheckTodo(value)
				this.$emit("allCheckTodo", value)
			}
		}
	},
	methods: {
		//清除已完成任务
		clearDone() {
			if (confirm("确认要清除已完成任务吗?")) {
				// this.clearDoneTodo()
				this.$emit("clearDoneTodo")
			}

		}
	}
}
</script>

<style scoped>
/*footer*/
.todo-footer {
	height: 40px;
	line-height: 40px;
	padding-left: 6px;
	margin-top: 5px;
}

.todo-footer label {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}

.todo-footer label input {
	position: relative;
	top: -1px;
	vertical-align: middle;
	margin-right: 5px;
}

.todo-footer button {
	float: right;
	margin-top: 5px;
}
</style>